<template>
  <div>
    <el-drawer
      title="取货核销"
      v-model="visible"
      :append-to-body="true"
      size="1000"
      @close="close(updateRef)"
    >
      <div v-if="visible">
        <el-form
          :model="updateForm"
          ref="updateRef"
          :rules="createRules"
          label-width="120px"
          size="default"
          v-loading="initLoading"
        >
          <el-form-item label="取货信息：">
            <div>
              <div>
                <span class="text-grey">提货联系人：</span>
                <span>{{ extractAddress?.linkname }}</span>
              </div>
              <div class="mt10">
                <span class="text-grey">提货联系电话：</span>
                <span>{{ extractAddress?.phone }}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="取货码："
            prop="extract_code"
          >
            <el-input
              v-model="updateForm.extract_code"
              placeholder="请输入取货码"
            ></el-input>
          </el-form-item>
        </el-form>
        <div>
          <template v-if="deliveryGoods.length > 0">
            <!-- 列表 -->
            <el-table
              class="mt20"
              :data="deliveryGoods"
              row-key="id"
              border
              @selection-change="tableSelectionChange"
            >
              <el-table-column
                type="selection"
                width="40"
                :selectable="selectableStatus"
              />
              <el-table-column label="商品名称" prop="goods_name" width="300">
                <template #default="scope">
                  <div class="te">{{ scope.row.goods_name }}</div>
                </template></el-table-column
              >
              <el-table-column label="数量" prop="total_num" align="center">
                <template #default="scope">
                  <div class="te">{{ scope.row.total_num }}</div>
                </template></el-table-column
              >
              <el-table-column
                label="核销状态"
                prop="delivery_status"
                align="center"
              >
                <template #default="scope">
                  <div class="te">{{ scope.row.delivery_status.name }}</div>
                </template></el-table-column
              >
            </el-table>
          </template>
        </div>
      </div>
      <template #footer>
        <span class="flex center">
          <el-button @click="visible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnLoading"
            @click="createOk(updateRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-drawer>
  </div>
</template>
  
  <script lang="ts">
export default {
  name: "storeOrderExtract",
};
</script>
    <script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import type { FormInstance } from "element-plus";
import type { Result, ResultError } from "@/types";
import { getOrderDeliveryDetail, toOrderExtract } from "@/api/store/order";

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const visible = ref<boolean>(false);

const operationId = ref<number>(0);

const updateRef = ref<typeof FormInstance>();

const btnLoading = ref<boolean>(false);

const initLoading = ref<boolean>(true);

const toInit = () => {
  if (!operationId.value) {
    initLoading.value = false;
    return;
  }
  getOrderDeliveryDetail({ id: operationId.value })
    .then((res: Result) => {
      extractAddress.value = res.data.detail;
      deliveryGoods.value = res.data.delivery || [];
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
      close();
    });
};

const extractAddress = ref<any>({});

const deliveryGoods = ref<any>([]);

const updateForm = ref<any>({
  extract_code: "",
  order_goods_id: [],
});
const createRules: any = reactive({
  extract_code: [{ required: true, message: "请输入取货码" }],
});

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      toOrderExtract(
        Object.assign(
          {
            id: operationId.value,
          },
          updateForm.value
        )
      )
        .then((res: Result) => {
          $message.success(res.message);
          close(formEl);
          emit("success");
          btnLoading.value = false;
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
          btnLoading.value = false;
        });
    }
  });
};

const tableSelectionChange = (res: any) => {
  updateForm.value.order_goods_id = [];
  res.forEach((item: any) => {
    updateForm.value.order_goods_id.push(item.order_goods_id);
  });
};

const selectableStatus = (row: any, index: number) => {
  return row.delivery_status.value ? false : true;
};

const open = (id: number = 0) => {
  initLoading.value = true;
  if (id != 0) {
    operationId.value = id;
  }
  nextTick(() => {
    toInit();
  });
  visible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined = undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
  updateForm.value.order_goods_id = [];
  visible.value = false;
};

defineExpose({ open });
</script>